<template>
  <view>
    <u-navbar
      title="商家入驻介绍"
      placeholder
      titleStyle="color:white"
      leftIconColor="#fff"
      auto-back
      bgColor="#248DF1"
    >
    </u-navbar>
    <view class="settleIn">
      <view class="settleIn_left">
        <view class="settleIn_title">
          <text :class="(tabNav === 0 ? 'sintext rr' : '') + ' radius'" @tap="settleTab(0)">商家入驻介绍</text>
          <text :class="tabNav === 1 ? 'sintext ll' : ''" @tap="settleTab(1)">商家入驻案例</text>
        </view>
        <!-- 商家入驻介绍 -->
        <view :class="'serial-item ' + (tabNav === 0?'show':'hide')" v-if="tabNav === 0">
          <!--01  -->
          <view class="serial_Number">
            <view class="number_frist">
              <text class="num_one">01</text>
              <view class="little_box">
                <image class="little_left" :src="BaseImgUrl + '/images/little_left.png'"></image>
                <text class="ts">提升更多的外卖单量</text>
                <image class="little_right" :src="BaseImgUrl + '/images/little_right.png'"></image>
              </view>
              <text class="pt_text">双平台曝光引流</text>
            </view>
          </view>
          <view class="Efficient">
            <view>
              <image
                src="https://img.alicdn.com/imgextra/i2/3829152210/O1CN01058HnO1SCE3CbHpgE_!!3829152210.png">
              </image>
              <text>高效拉新.提升转化</text>
              <view>迅速拉升外卖平台新客户，提升外卖下单转化率</view>
            </view>
            <view>
              <image
                src="https://img.alicdn.com/imgextra/i2/3829152210/O1CN01S00STT1SCE3LgjeHY_!!3829152210.png">
              </image>
              <text>增加销量·提升复购</text>
              <view>快速提高店铺总体订单量，提升外卖下单复购率</view>
            </view>
          </view>
          <!-- 02 -->
          <view class="serial_Number">
            <view class="number_frist">
              <text class="num_one">02</text>
              <view class="little_box">
                <image class="little_left" :src="BaseImgUrl + '/images/little_left.png'"></image>
                <text class="ts">灵活营销刺激消费</text>
                <image class="little_right" :src="BaseImgUrl + '/images/little_right.png'"></image>
              </view>
              <text class="pt_text">获得更多的外卖好评</text>
            </view>
          </view>
          <view class="settImg">
            <image
              src="https://img.alicdn.com/imgextra/i2/3829152210/O1CN01ephh8k1SCE3KvN7df_!!3829152210.png">
            </image>
          </view>
          <view class="two_text">
            <text>降低推广</text>
            <text>营销推广</text>
            <text>引流到店</text>
            <text>积累评价</text>
          </view>
          <!-- 03 -->
          <view class="serial_Number">
            <view class="number_frist">
              <text class="num_one">03</text>
              <view class="little_box">
                <image class="little_left" :src="BaseImgUrl + '/images/little_left.png'"></image>
                <text class="ts">为什么选择我们霸王餐</text>
                <image class="little_right" :src="BaseImgUrl + '/images/little_right.png'"></image>
              </view>
            </view>
          </view>
          <view class="choice">
            <view class="choice_list">
              <image class="choiceImg" :src="BaseImgUrl + '/images/settleIn4.png'"></image>
              <view class="choiceText">
                <text>本地10万+用户资源</text>
              </view>
            </view>
            <view class="choice_list">
              <image class="choiceImg" :src="BaseImgUrl + '/images/settleIn5.png'"></image>
              <view class="choiceText">
                <text>高效迅速打造优质店铺</text>
              </view>
            </view>
            <view class="choice_list">
              <image class="choiceImg" :src="BaseImgUrl + '/images/settleIn6.png'"></image>
              <view class="choiceText">
                <text>店铺效果立竿见影</text>
              </view>
            </view>
          </view>
        </view>
        <!-- 商家案列 -->
        <view class="serial-item" v-if="tabNav === 1">
          <view class="serial_Number">
            <view class="number_frist">
              <text class="num_one">01</text>
              <view class="little_box">
                <image class="little_left" :src="BaseImgUrl + '/images/little_left.png'"></image>
                <text class="ts">优质商家展示</text>
                <image class="little_right" :src="BaseImgUrl + '/images/little_right.png'"></image>
              </view>
            </view>
          </view>
          <view class="spread_list">
            <!-- 1 -->
            <view class="spread-item" v-for="(item, index) in shopAll" :key="index">
              <view class="spreadImg">
                <image :src="item.logo"></image>
              </view>
              <view class="spreadBottom">
                <view class="score">
                  <text>{{ item.progress ? item.progress : '75%' }}</text>
                  <view>评分提升</view>
                </view>
                <view class="score">
                  <text>{{ item.reduceMoney ? item.reduceMoney : '8000元' }}</text>
                  <view>推广节约</view>
                </view>
              </view>
              <button class="look_btn" @tap="toPage(item)">去看看</button>
            </view>
          </view>
          <!-- 餐饮合作商户 -->
          <view class="serial_Number">
            <view class="number_frist">
              <text class="num_one">02</text>
              <view class="little_box">
                <image class="little_left" :src="BaseImgUrl + '/images/little_left.png'"></image>
                <text class="ts">餐饮合作商户</text>
                <image class="little_right" :src="BaseImgUrl + '/images/little_right.png'"></image>
              </view>
            </view>
          </view>
          <view class="merchant">
            <view v-for="(item, index) in shop_data.all_shop" :key="index">
              <image :src="item.logo"></image>
            </view>
          </view>
        </view>
        <!-- 申请入驻 -->
        <view class="apply" @click="toCallus">
          申请入驻
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>

import {ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import {goodShopsAPI} from "../../services";
import {BaseImgUrl} from "../../utils/lshttp";
import {conUtils} from "../../utils/conUtils";
import {useCommonInfoStore} from "../../stores/modules/commonInfo";

const commonInfoStore = useCommonInfoStore()
const shop_data = ref()
const shopAll = ref([])
const shopIcon = ref([])
const tabNav = ref(0)
onLoad(async () => {
  const res = await goodShopsAPI()
  shop_data.value = res.result
  shopAll.value = res.result.good_shop
  shopIcon.value = res.result.all_shop
  conUtils(" shopAll.value", shopAll.value)
  conUtils(" shopIcon.value", shopIcon.value)
})

const toCallus = () =>{
  uni.navigateTo({url:'apply'})
}
const settleTab = (type) => {
  tabNav.value = type
}
const toPage = (item) => {
  commonInfoStore.toPage(item.type, item.path)
}
</script>
<style>
page {
  width: 100%;
  height: 100%;
  background: #248DF1;
}
</style>
<style lang="scss" scoped>
//page {
//  background-color: #F6F6F6;
//}
page {
  width: 100%;
  height: 100%;
  background: #248DF1;
}

.u-status-bar,
.u-navbar__content {
  background-image: linear-gradient(90deg, #248DF1, #248DF1);
}

.show {
  display: block;
}

.hide {
  display: none;
}

.return_arrow {
  position: fixed;
  left: 0;
  z-index: 111;
  width: 100%;
  box-sizing: border-box;
  padding: 0 40rpx;
}

.return_img {
  width: 20rpx;
  height: 32rpx;
}

page {
  width: 100%;
  height: 100%;
  background: #248DF1;
}

.settleIn {
  width: 100%;
  height: auto;
  position: relative;
  padding-bottom: 260rpx;
  box-sizing: border-box;
  padding-top: 68rpx;
}

.settleIn .shop_bg {
  width: 80%;
  display: block;
  margin: 0 auto;
  position: absolute;
  top: 60rpx;
  z-index: 1;
  left: 0;
  right: 0;
}

.settleIn_left {
  width: 682rpx;
  height: auto;
  background: #fff;
  border-radius: 20rpx;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.settleIn_title {
  width: 100%;
  height: 86rpx;
  line-height: 86rpx;
  box-sizing: border-box;
  border-radius: 20rpx;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.settleIn_title text {
  width: 50%;
  height: 100%;
  display: inline-block;
  font-size: 30rpx;
  color: #fff;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(to right, #FC754A, #FEBC5B);
  border-radius: 0 20rpx 0 20rpx;
  position: relative;
  top: -1rpx;
}

.settleIn_title text.radius {
  border-radius: 18rpx 0 18rpx 0;
}

.settleIn_left .sintext {
  background: #fff;
  color: #333;
  border-radius: 18rpx 18rpx 0 0 !important;
  position: relative;
  top: -10rpx;
  font-weight: bold;
}

.serial-item {
  width: 100%;
  height: auto;
  padding-bottom: 28rpx;
  box-sizing: border-box;
}

.serial_Number {
  width: 100%;
  height: 170rpx;
  position: relative;
  margin: 10rpx auto;
}

.number_frist {
  text-align: center;
}

.number_frist text:first-child {
  width: 260rpx;
  height: 92rpx;
  box-sizing: border-box;
  display: block;
  font-size: 72rpx;
  color: #ecebeb;
  font-weight: bold;
  margin: 56rpx auto 0;
}

.number_frist .pt_text {
  font-size: 28rpx;
  color: rgba(102, 102, 102, 1);
  margin-top: 12rpx;
}

.number_frist text:last-child {
  font-size: 26rpx;
  color: #333;
  display: block;
  line-height: 48rpx;
}

.number_frist .little_box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.number_frist .little_box image {
  width: 70rpx;
  height: 40rpx;
}

.number_frist .little_box .ts {
  font-size: 30rpx;
  font-weight: bold;
  color: rgba(17, 17, 17, 1);
  margin: 0 16rpx;
}

.serial_Number > text {
  width: 100%;
  height: 50rpx;
  display: block;
  font-size: 34rpx;
  color: #333;
  position: absolute;
  font-weight: bold;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  text-align: center;
  padding-top: 12rpx;
}

.Efficient {
  width: 100%;
  height: auto;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  text-align: center;
  align-items: center;
}

.Efficient > view image {
  width: 340rpx;
  height: 218rpx;
  display: block;
  margin: 30rpx auto;
}

.Efficient > view {
  width: 340rpx;
  height: auto;
  overflow: hidden;
  float: left;
}

.Efficient > view text {
  display: block;
  font-size: 30rpx;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 40rpx;
  padding: 10rpx 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: bold;
}

.Efficient > view view {
  font-size: 24rpx;
  color: #666;
  box-sizing: border-box;
  padding: 0 35rpx;
  line-height: 40rpx;
}

.settImg {
  width: 560rpx;
  height: 226rpx;
  position: relative;
  line-height: 38rpx;
  margin: 60rpx auto 0;
}

.settImg image {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.two_text {
  display: flex;
  justify-content: space-between;
  width: 560rpx;
  margin: 0 auto;
  font-size: 24rpx;
  color: rgba(17, 17, 17, 1);
  font-weight: bold;
}

.two_text text {
  margin-top: 20rpx;
}

.choice {
  width: 100%;
  height: auto;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  padding: 0 20rpx;
  box-sizing: border-box;
  flex-wrap: wrap;
  margin-top: 30rpx;
}

.choice_list {
  margin-bottom: 25rpx;
  width: 210rpx;
  min-height: 261rpx;
  text-align: center;
  position: relative;
}

.choiceImg {
  width: 102rpx;
  height: 102rpx;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 2;
  margin: 0 auto;
}

.choiceText {
  width: 210rpx;
  min-height: 210rpx;
  background: rgba(33, 148, 255, 0.05);
  border-radius: 8rpx;
  position: absolute;
  top: 51rpx;
  left: 0;
  z-index: 1;
  padding: 0 27rpx;
  box-sizing: border-box;
}

.choiceText text {
  display: block;
  font-size: 24rpx;
  color: #2194FF;
  line-height: 36rpx;
  padding: 99rpx 0 38rpx;
}

/* 申请入驻 */
.apply {
  width: 682rpx;
  height: 92rpx;
  background: linear-gradient(to top, rgba(254, 252, 168, 1), rgba(255, 184, 0, 1));
  border-radius: 46rpx;
  font-size: 36rpx;
  color: rgba(79, 38, 0, 1);
  line-height: 92rpx;
  text-align: center;
  position: fixed;
  left: 50%;
  margin: 25rpx auto 0 -345rpx;
  bottom: 110rpx;
  box-shadow: rgba(124, 2, 2, 0.31) 0 8rpx 13rpx 8rpx;
  z-index: 9999;
}

.apply navigator {
  display: inline-block;
  width: 100%;
  height: 100%;
}

/* 商家案列 */
.spread_list {
  width: 100%;
  height: auto;
  padding: 0 36rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.spread-item {
  width: 296rpx;
  border-radius: 16rpx;
  background: #f4f4f6;
  margin-bottom: 20rpx;
  position: relative;
  margin-top: 96rpx;
  height: 302rpx;
  box-sizing: border-box;
  padding-top: 108rpx;
}

.spread-item .look_btn {
  width: 148rpx;
  height: 56rpx;
  background: linear-gradient(to left, #56A2FF, #4CCAFF);
  font-size: 22rpx;
  color: rgba(255, 255, 255, 1);
  line-height: 56rpx;
  text-align: center;
  margin-top: 24rpx;
}

.spread-item .spreadImg {
  display: block;
  width: 100%;
  height: 208rpx;
  padding: 29rpx 0;
  box-sizing: border-box;
  position: absolute;
  top: -104rpx;
  left: 0;
  right: 0;
  margin: auto;
}

.spreadImg image {
  display: block;
  margin: 0 auto;
  width: 138rpx;
  height: 138rpx;
  border-radius: 16rpx;
}

.spread_list .linkTo {
  display: block;
  height: 42rpx;
  line-height: 42rpx;
  text-align: center;
  font-size: 28rpx;
  color: #999;
}

.spreadBottom {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.score text {
  display: block;
  font-size: 36rpx;
  color: rgba(17, 17, 17, 1);
  font-weight: bold;
  text-align: center;
}

.score view {
  display: block;
  font-size: 28rpx;
  color: rgba(102, 102, 102, 1);
}

/* 餐饮合作商户 */
.merchant {
  width: 100%;
  height: auto;
  padding: 0 44rpx;
  box-sizing: border-box;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}

.merchant > view {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 38rpx;
  margin-right: 38rpx;
}

.merchant > view:nth-child(4n+4) {
  margin-right: 0;
}

.merchant > view image {
  width: 100%;
  height: 100%;
  background: #f2f2f2;
  border-radius: 16rpx;
}

.sintext.rr {
  border-radius: 20rpx 13rpx 0 0;
}

.sintext.ll {
  border-radius: 13rpx 20rpx 0 0;
}

.bottom_box {
  height: 250rpx;
}
</style>
